<template>
	<el-form @keyup.enter='loginByPassword(ruleFormRef)' ref="ruleFormRef" :model="ruleForm" :rules="rules"
		class="demo-ruleForm" status-icon size="large">
		<el-form-item prop="username">
			<el-input v-model="ruleForm.username" prefix-icon="user" clearable placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" v-model="ruleForm.password" prefix-icon="lock" placeholder="请输入密码"
				show-password></el-input>
		</el-form-item>

		<el-form-item prop="captcha">
			<div style="display: flex; align-items: center; width: 100%;">
				<el-input v-model="ruleForm.captcha" placeholder="请输入验证码" prefix-icon="circleCheck"></el-input>
				<el-image @click="getCaptchaImageData" :src='captchaImage'
					style="width: 100px;height: 40px; margin-left: 10px;"></el-image>
			</div>
		</el-form-item>

		<div
			style="display: flex;align-items: center;width: 100%;justify-content: space-between; margin-bottom: 10px;font-size: 14px;">
			<div>
				<el-checkbox label="记住密码" v-model="isRemember"></el-checkbox>
			</div>
			<div>
				<span>{{ $t('login.forgetPassword') }}</span>
			</div>
		</div>

		<el-form-item>
			<el-button :loading="isLoading" @click="loginByPassword(ruleFormRef)" round style="width: 100%;">{{
				$t('login.signIn') }}</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { getCaptchaImageAPI, postLoginByJsonAPI } from '@renderer/api/login';
import { RuleForm } from '@renderer/interface/login';
import { Decrypt, Encrypt } from '@renderer/utils/aes';
import { FormInstance } from 'element-plus';
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue';
import { useLogin } from '@renderer/composables/login'
import { useMemoPassword } from '@renderer/composables/memoPassword';

// 表单验证
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	username: localStorage.getItem('username') || '',
	password: '',
	key: '',
	captcha: ''
})
// 本地存储有密码时赋值
if (localStorage.getItem('password')) {
	ruleForm.password = Decrypt(localStorage.getItem('password'))
}
const { proxy } = getCurrentInstance()!
// 当语言变化时，实时更新表单校验规则
const rules = computed(() => {
	return {
		username: [
			{ required: true, message: proxy?.$t('login.userError'), trigger: 'blur' }
		],
		password: [
			{ required: true, message: proxy?.$t('login.PWError'), trigger: 'blur' }
		],
		captcha: [
			{ required: true, message: proxy?.$t('login.smsError'), trigger: 'blur' }
		],
	}
})

// 验证码数据
const captchaImage = ref('')
// 获取验证码数据
const getCaptchaImageData = async () => {
	// 获取当前时间戳
	const key = new Date().getTime().toString()
	ruleForm.key = key
	// 发送请求
	const res = await getCaptchaImageAPI(key)
	// 解析
	const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
	// 赋值
	captchaImage.value = URL.createObjectURL(blob)
}

// 标记加载状态
const isLoading = ref(false)
// 登录
const loginByPassword = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate(async (valid) => {
		if (valid) {
			isLoading.value = true
			const res = await postLoginByJsonAPI({
				password: Encrypt(ruleForm.password),
				username: Encrypt(ruleForm.username),
				key: ruleForm.key,
				captcha: ruleForm.captcha
			})

			// 获取 TOKEN 失败，退出
			if (res.code !== '200') {
				isLoading.value = false
				return
			}

			// 调用组合式函数
			useLogin(res)

			// 停止加载状态
			isLoading.value = false

			// 记住密码
			onRemember()
		}
	})
}

// 记住密码
const isRemember = ref(JSON.parse(localStorage.getItem('isRemember') || 'false'))
// 记住密码的组合式函数
const { onRemember } = useMemoPassword(isRemember, ruleForm)

// 页面挂载完毕后
onMounted(() => {
	getCaptchaImageData()
})
</script>

<style scoped></style>